<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="fixed-search">
			<view class="search-bar">
				<view class="search-input">
					<!-- <text class="iconfont icon-search"></text> -->
					<input type="text" placeholder="请搜索您想购买的商品" v-model="searchKey" @confirm="handleSearch" @focus="handleFocus" @blur="handleBlur"/>
					<image class="scan-icon" src="/static/icon/searchIcon.png" mode="aspectFit" @tap="handleScan" />
				</view>
			</view>
		</view>
		<!-- <view class="search-bar">
			<view class="search-input">
				<text class="iconfont icon-search"></text>
				<input type="text" placeholder="搜索贴纸" v-model="searchKey" @confirm="handleSearch" />
			</view>
		</view> -->
		<view class="container-main" v-if="!isFocus">
			<view class="home-banner">
				<swiper class="swiper" :circular="true" :autoplay="true" :interval="3000">
					<swiper-item>
						<!-- <image src="/static/banner/new-year.png" mode="aspectFill" /> -->
						<view class="swiper-item">
							
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 分类标签 -->
			<!-- <scroll-view scroll-x class="category-scroll">
				<view class="category-list">
					<view 
						class="category-item" 
						:class="{ active: currentCategory === item.id }"
						v-for="item in categories" 
						:key="item.id"
						@tap="selectCategory(item.id)"
					>
						{{ item.name }}
					</view>
				</view>
			</scroll-view> -->
			<view class="category-list">
				<view class="category-list-item" style="background-color: #D5ECFE;">
					<image src="/static/icon/shopIcon.png" mode=""></image>
					<text>现货商品</text>
				</view>
				<view class="category-list-item" style="background-color: #D8FBDD;">
					<image src="/static/icon/CustomizationZoneIcon.png" mode=""></image>
					<text>现货商品</text>
				</view>
				<view class="category-list-item" style="background-color: #E2D8FB;">
					<image src="/static/icon/PromotionZoneIcon.png" mode=""></image>
					<text>现货商品</text>
				</view>
			</view>
			<!-- 贴纸列表 -->
			<scroll-view 
				scroll-y 
				class="decals-list"
				@scrolltolower="loadMore"
				refresher-enabled
				:refresher-triggered="isRefreshing"
				@refresherrefresh="onRefresh"
			>
				<view class="decals-grid">
					<view 
						class="decals-item" 
						v-for="item in decalsList" 
						:key="item.id"
						@tap="goToDetail(item.id)"
					>
						<image :src="item.image" mode="aspectFill" />
						<view class="decals-info">
							<view class="decals-info-text">
								<text class="decals-info-text-name">{{ item.name }}</text>
							</view>
							<view class="decals-info-priceInfo">
								<text class="decals-info-priceInfo-num">¥{{ item.price }}</text>
								<text class="decals-info-priceInfo-sales">销量 {{ item.num }}</text>
							</view>
							
						</view>
					</view>
				</view>
				
				<!-- 加载更多 -->
				<view class="loading" v-if="isLoading">
					<text>加载中...</text>
				</view>
				
				<!-- 无数据提示 -->
				<view class="empty" v-if="decalsList.length === 0 && !isLoading">
					<text>暂无数据</text>
				</view>
			</scroll-view>
		</view>
		<view class="search-main" v-else>
			<view class="search-main-header">
				<text>搜索历史</text>
				<image src="/static/icon/deleteIcon.png" mode=""></image>
			</view>
			<view class="search-main-content">
				<view class="search-main-content-list">
					<view class="search-main-content-list-item" @tap="goToSearch(1)">
						搜索历史
					</view>
					<view class="search-main-content-list-item">
						搜索历史
					</view>
					<view class="search-main-content-list-item">
						搜索历史
					</view>
					<view class="search-main-content-list-item">
						搜索历史
					</view>
					<view class="search-main-content-list-item">
						搜索历史
					</view>
					<view class="search-main-content-list-item">
						搜索历史
					</view>
					<view class="search-main-content-list-item">
						搜索历史
					</view>
					<view class="search-main-content-list-item">
						搜索历史
					</view>
					<view class="search-main-content-list-item">
						搜索历史
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: '',
				currentCategory: 0,
				categories: [
					{ id: 0, name: '全部' },
					{ id: 1, name: '热门' },
					{ id: 2, name: '新品' },
					{ id: 3, name: '限定' }
				],
				decalsList: [],
				page: 1,
				isLoading: false,
				isRefreshing: false,
				isFocus: true
			}
		},
		onLoad() {
			this.loadDecals()
		},
		methods: {
			async loadDecals() {
				if (this.isLoading) return
				this.isLoading = true
				
				try {
					// 这里替换为实际的API调用
					const mockData = Array(10).fill().map((_, index) => ({
						id: this.page * 10 + index,
						name: `贴纸贴纸贴纸贴纸贴纸贴纸贴纸贴纸贴纸贴纸贴纸贴纸贴纸${this.page * 10 + index}`,
						price: Math.floor(Math.random() * 100) + 10,
						image: '/static/demo/decals.jpg',
						num: 10,
					}))
					
					this.decalsList = [...this.decalsList, ...mockData]
					this.page++
				} catch (error) {
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					})
				} finally {
					this.isLoading = false
				}
			},
			loadMore() {
				this.loadDecals()
			},
			async onRefresh() {
				this.isRefreshing = true
				this.page = 1
				this.decalsList = []
				await this.loadDecals()
				this.isRefreshing = false
			},
			selectCategory(categoryId) {
				this.currentCategory = categoryId
				this.page = 1
				this.decalsList = []
				this.loadDecals()
			},
			handleSearch() {
				this.page = 1
				this.decalsList = []
				this.loadDecals()
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}`
				})
			},
			handleFocus() {
				this.isFocus = true
			},
			handleBlur() {
				this.isFocus = false
			},

			// 去搜索页
			goToSearch(id) {
				uni.navigateTo({
					url: `/pages/searchPage/index?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '@/static/iconfont.css';

	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
	}
	.fixed-search {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #fff;
	}
	.search-bar {
		padding: 20rpx;
		background-color: #fff;
		
		.search-input {
			display: flex;
			align-items: center;
			background-color: #f5f5f5;
			height: 72rpx;
			border-radius: 36rpx;
			padding: 0 30rpx;
			
			.iconfont {
				font-size: 32rpx;
				color: #999;
				margin-right: 10rpx;
			}
			
			input {
				flex: 1;
				height: 100%;
				font-size: 28rpx;
			}
			
			.scan-icon{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	.container-main{
		margin-top: 112rpx;
		background-color: #fff;
	}
	.category-scroll {
		background-color: #fff;
		padding: 20rpx 0;
		
		.category-list {
			white-space: nowrap;
			padding: 0 20rpx;
			
			.category-item {
				display: inline-block;
				padding: 10rpx 30rpx;
				margin-right: 20rpx;
				font-size: 28rpx;
				color: #666;
				background-color: #f5f5f5;
				border-radius: 28rpx;
				
				&.active {
					color: #fff;
					background-color: #333;
				}
			}
		}
	}

	.decals-list {
		// height: calc(100vh - 200rpx);
		// height: calc(100vh - 72rpx - 40rpx - 18rpx - 32rpx - 320rpx);
		height: calc(100vh - 72rpx - 40rpx);
		// max-height: calc(100vh);
		// min-height: calc(100vh - 72rpx - 40rpx - 18rpx - 32rpx - 320rpx);
		.decals-grid {
			padding: 20rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			
			.decals-item {
				width: 345rpx;
				background-color: #fff;
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				overflow: hidden;
				
				image {
					width: 100%;
					height: 345rpx;
				}
				
				.decals-info {
					padding: 16rpx;
					.decals-info-text{
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;  /* 超出宽度200px后显示省略号 */
						white-space: nowrap;  /* 限制不允许换行 */
						&-name {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 8rpx;
						}
					}
					
					.decals-info-priceInfo{
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						&-num{
							font-size: 32rpx;
							color: #ff6b6b;
							font-weight: bold;
						}
						&-sales{
							font-size: 20rpx;
							color: rgba(0,0,0,0.4);
						}
					}
					
				}
			}
		}
	}

	.loading {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 24rpx;
	}

	.empty {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
	
	.home-banner{
		width: 100%;
		padding: 18rpx 32rpx 32rpx 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		swiper{
			width: 100%;
			height: 320rpx;
			swiper-item{
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}
		}
	}
	.category-list{
		width: 100%;
		padding: 0 32rpx 36rpx 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.category-list-item{
			width: 202rpx;
			height: 188rpx;
			display: flex;
			flex-flow: column;
			align-items: center;
			justify-content: center;
			border-radius: 24rpx;
			image{
				width: 66rpx;
				height: 66rpx;
				margin-bottom: 28rpx;
			}
		}
	}
	
	
	.search-main{
		margin-top: 112rpx;
		background-color: #fff;
		width: 100%;
		height: calc(100vh - 112rpx);
		padding: 32rpx;
		box-sizing: border-box;
		.search-main-header{
			
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			text{
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
		.search-main-content{
			margin-top: 30rpx;
			.search-main-content-list{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				justify-content: flex-start;
				gap: 20rpx;
				.search-main-content-list-item{
					font-size: 28rpx;
					padding: 6rpx 15rpx;
					background-color: #EFF0F4;
					border-radius: 24rpx;
					color: rgba(0,0,0,0.5);
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: normal;
					height: 52rpx;
					box-sizing: border-box;
				}
			}
		}
	}
</style>
